<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue初体验</title>
</head>

<body>

<div id="app">
    <tiandog dogname="班长1号"></tiandog>
    <tiandog dogname="班长2号"></tiandog>
    <tiandog dogname="班长3号"></tiandog>
</div>

<!-- 1.导入 vue框架 -->
<script src="./vue.js"></script>

<!-- 2.编写 js代码 -->
<script>
    // 注册 自定义组件
    Vue.component('tiandog', {
        // a.组件自己的数据
        data() {
            return {
                name: '班长',
                age: 39,
                gender: true
            }
        },
        // b.为 组件定义标签属性，用来 接收 传进来的参数
        props: ['dogname'],
        // c.组件自己的方法
        methods: {
            bark() {

                console.log(`美女你好，我是${this.name}，可以给你买一套房吗？`)
            }
        },
        // d.组件自己的模板标签
        template: `
            <div @click="bark">舔狗一号资料：{{dogname}} , 年龄：{{age}}，性别：{{gender?'男':'女'}}</div>
        `
    })

    // 3.创建 vue 实例
    let vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {}
    })
</script>
</body>

</html>